$screen-radio-list: (
  group-row-number: 0,
  'radio-input-display': none,
  'radio-padding': 0 5px,
  'radio-border': 1px solid getCssVar(screen-dashboard, border-color),
  'radio-checked-font-weight': 600,
  'radio-label-padding-left': 0,
);
/* stylelint-disable no-descending-specificity */
@include b(screen-radio-list) {
  @include set-component-css-var(screen-radio-list, $screen-radio-list);
  @include e(text) {
    font-size: getCssVar(form-item, font-size);
    color: getCssVar(form-item, text-color);
  }

  .el-radio__input {
    display: getCssVar(screen-radio-list, radio-input-display);
  }

  .el-radio {
    width: max-content;
    padding: getCssVar(screen-radio-list, radio-padding);
    text-align: center;
    background-color: getCssVar(screen-dashboard, bg-color);
    border: getCssVar(screen-radio-list, radio-border);

    .#{bem('screen-radio-list','text')} {
      color: getCssVar(screen-dashboard, primary-active-color);
    }

    &.is-checked {
      background-color: getCssVar(screen-dashboard, primary-active-color);
      .#{bem('screen-radio-list','text')} {
        font-weight: getCssVar(screen-radio-list, radio-checked-font-weight);
        color: getCssVar(screen-dashboard, text-color);
      }
    }

    .el-radio__label {
      padding-left: getCssVar(screen-radio-list, radio-label-padding-left);
    }
  }

  @include m(readonly) {
    font-size: getCssVar(form-item, font-size);
    line-height: getCssVar(editor, default, line-height);
    color: getCssVar(form-item, readonly-color);
  }

  @include e(button) {
    @include m(round-corner) {
      margin-right: getCssVar(spacing, base-loose);

      &.el-radio-button.is-active {
        .el-radio-button__inner {
          color: getCssVar(color, primary);
          background-color: getCssVar(color, secondary, light, default);
          border-color: getCssVar(color, secondary, light, default);
        }

        .el-radio-button__original-radio:checked + .el-radio-button__inner {
          box-shadow: none;
        }
      }

      &.el-radio-button .el-radio-button__inner {
        padding: getCssVar('spacing', 'tight') getCssVar('spacing', 'base');
        background-color: getCssVar(color, tertiary, light, hover);
        border-color: getCssVar(color, tertiary, light, hover);
        border-radius: getCssVar(height-control, default);

        &:nth-last-child(1) {
          margin: 0;
        }
      }

      &.el-radio-button.is-disabled {
        &.is-active .el-radio-button__inner {
          border: getCssVar('border-thickness', 'control') solid
            getCssVar(color, disabled, text);
        }

        .el-radio-button__inner {
          color: getCssVar(color, disabled, text);
          background: getCssVar(color, disabled, bg);
          border-color: getCssVar(color, disabled, border);
        }
      }
    }
  }

  @include when(grid-layout) {
    .el-radio-group {
      display: grid;
      grid-template-columns: repeat(
        getCssVar(screen-radio-list, group-row-number),
        1fr
      );
    }
  }
}

@include b(form-item) {
  @include b(screen-radio-list) {
    @include when(show-default) {
      padding: getCssVar(form-item, hover-edit-padding);
    }
  }
}
